<script setup lang="ts">
import { computed, ref } from 'vue'

const props = defineProps<{
  amount: number
}>()


// 控制显示状态
const isVisible = ref(false)

// 切换显示状态
const toggleVisibility = () => {
  isVisible.value = !isVisible.value
}

// 格式化金额显示
const formattedAmount = computed(() => {
  return `¥${props.amount.toFixed(2)}`
})
</script>

<template>
  <div class="balance-header">
    <button @click="toggleVisibility" class="toggle-button">
      <el-icon v-if="isVisible"><View /></el-icon>
      <el-icon v-else><Hide /></el-icon>
    </button>
    <slot name="default">
      <span></span>
    </slot>
  </div>
  <div class="balance-content">
    <span v-if="isVisible" class="balance-amount">{{ formattedAmount }}</span>
    <span v-else class="balance-hidden">****</span>
  </div>
</template>

<style scoped>
.balance-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}


.toggle-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.toggle-button:hover {
  background-color: #f5f5f5;
}

.balance-content {
  font-size: 34px;
  font-weight: bold;
  text-align: center;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.balance-amount {
  color: #333;
}

.balance-hidden {
  color: #333;
  letter-spacing: 2px;
  font-family: monospace;
}
</style>